<template>
  <div id="wK_historySearch">
    <div class="display:flex;">
      <span class="h3">车辆管理</span>
      <span class="title" v-if="title">>{{ title }}</span>
    </div>

    <a-form-model :model="form" :colon="false" style="margin: 10px 0">
      <a-row type="flex">
        <a-col :span="5" v-if="isshow">
          <a-form-model-item label="车辆牌照" class="from-item__class">
            <a-input
              v-model="form.carCode"
              placeholder="请输入车辆牌照"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="5" v-if="isshow">
          <a-form-model-item label="品牌型号" class="from-item__class">
            <a-input
              v-model="form.brandModel"
              placeholder="请输入品牌型号"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="2" v-if="isshow">
          <li class="liall">保险到期:&nbsp;{{ CountList.annualCount }}</li>
        </a-col>
        <a-col :span="8" v-if="isshow">
          <li class="liall">年检到期:&nbsp;{{ CountList.insuranceCount }}</li>
        </a-col>
        <a-col :span="2" v-if="isshow" style="margin-top: 3px">
          <a-button style="letter-spacing: 8px" type="primary" @click="onSubmit">查询</a-button>
        </a-col>
        <a-col style="margin-top: 3px">
          <a-button type="primary" v-if="isshow" @click="showModal">新增车辆</a-button>
        </a-col>
      </a-row>
      <span class="back-btn"> </span>
    </a-form-model>
    <div v-if="isshow">
      <div class="tableclass">
        <my-table
          :rowKey="(record) => record.id"
          style="min-height: 94%"
          :data-source="carList"
          :columns="columns"
          :pagination="false"
        >
          <span slot="operate" slot-scope="text, record">
            <a class="solvebtn" @click="lookDetail(record)">查看</a>
            <a class="solvebtn" @click="editDetail(record)">编辑</a>
            <a-popconfirm
              title="确定删除?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteDetail(record)"
            >
              <a class="solvebtn">删除</a>
            </a-popconfirm>
          </span>
          <div slot="isInsurance" slot-scope="text, data">
            <span style="color: #359842" v-if="data.isInsurance == false"
              >保险正常({{ data.insuranceTime }})</span
            >
            <span style="color: #d16655" v-else
              >保险即将逾期({{ data.insuranceTime }})</span
            >
          </div>
          <div slot="isAnnual" slot-scope="text, data">
            <span style="color: #359842" v-if="data.isAnnual == false"
              >正常({{ data.annualTime }})</span
            >
            <span style="color: #d16655" v-else
              >需年检({{ data.annualTime }})</span
            >
          </div>
        </my-table>
        <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination
              :show-total="(total) => `共 ${total} 条记录`"
              v-model="form.currentPage"
              :total="total"
              :defaultPageSize="form.pageSize"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-if="isAdd">
      <a-form-model layout="horizontal" :model="deptBind" :colon="false">
        <a-row type="flex" class="rowclass">
          <a-col :span="4" :offset="2">
            <a-form-model-item class="form-item" label="车牌号" :colon="false">
              <a-input
                class="inline-input"
                v-model="deptBind.carCode"
                placeholder
                autocomplete="off"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              labelAlign="right"
              label="车辆类型"
              :colon="false"
              prop="areaId"
            >
              <a-select
                class="fuze-management"
                @change="cartypeChange"
                v-model="deptBind.typeName"
                allow-clear
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in typeList"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="品牌型号"
              labelAlign="right"
              :colon="false"
            >
              <a-input
                v-model="deptBind.brandModel"
                class="inline-input"
                placeholder
                autocomplete="off"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="发动机号"
              labelAlign="right"
              :colon="false"
            >
              <a-input
                v-model="deptBind.enginerCode"
                class="inline-input"
                placeholder
                autocomplete="off"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" class="rowclass">
          <a-col :span="4" :offset="2">
            <a-form-model-item class="form-item" label="imei号" :colon="false">
              <a-input
                class="inline-input"
                v-model="deptBind.imei"
                placeholder
                autocomplete="off"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="设备类型"
              :colon="false"
              prop="spareName"
            >
              <a-input
                v-model="deptBind.devType"
                class="inline-input"
                placeholder
                autocomplete="off"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="开通时间"
              labelAlign="right"
              :colon="false"
            >
              <a-date-picker v-model="deptBind.inTime" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="到期时间"
              labelAlign="right"
              :colon="false"
            >
              <a-date-picker v-model="deptBind.outTime" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" class="rowclass">
          <a-col :span="4" :offset="2">
            <a-form-model-item
              class="form-item"
              labelAlign="right"
              label="选择大区"
              :colon="false"
              prop="areaId"
            >
              <a-tree-select
                style="width: 160px"
                v-model="deptBind.areaId"
                :defaultValue="deptBind.areaId"
                :treeData="deptList"
                :replaceFields="{
                  title: 'name',
                  key: 'id',
                  value: 'id',
                  children: 'menuList',
                }"
                placeholder="请选择地区"
              ></a-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="保险时间"
              labelAlign="right"
              :colon="false"
            >
              <a-date-picker v-model="deptBind.insuranceTime" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="年检时间"
              labelAlign="right"
              :colon="false"
            >
              <a-date-picker v-model="deptBind.annualTime" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="车辆状态"
              labelAlign="right"
              :colon="false"
            >
              <a-radio-group v-model="deptBind.status" @change="onChangeRadios">
                <a-radio :value="true">正常</a-radio>
                <a-radio :value="false">故障</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="bottom_btn">
        <a-button
          style="margin-right: 20px"
          type="primary"
          v-if="title == '新建申领'"
          @click="okAdd"
          >确认增加</a-button
        >
        <a-button
          style="margin-right: 20px"
          type="primary"
          v-if="title == '编辑'"
          @click="okAdd"
          >确认修改</a-button
        >
        <a-button type="reset" v-if="isAdd" @click="backShow"
          >返回列表</a-button
        >
      </div>
    </div>
    <div v-if="isdetail">
      <a-form-model layout="horizontal" :model="deptBind" :colon="false">
        <a-row type="flex" class="rowclass">
          <a-col :span="4" :offset="3">
            <a-form-model-item class="form-item" label="车牌号" :colon="false">
              {{ detailList.carCode }}
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              labelAlign="right"
              label="车辆类型"
              :colon="false"
              prop="areaId"
            >
              <span v-if="detailList.typeName">
                {{ detailList.typeName }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="品牌型号"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.brandModel">
                {{ detailList.brandModel }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="发动机号"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.enginerCode">
                {{ detailList.enginerCode }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" class="rowclass">
          <a-col :span="4" :offset="3">
            <a-form-model-item class="form-item" label="imei号" :colon="false">
              <span v-if="detailList.imei">
                {{ detailList.imei }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="设备类型"
              :colon="false"
              prop="spareName"
            >
              <span v-if="detailList.devType">
                {{ detailList.devType }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="开通时间"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.inTime">
                {{ detailList.inTime }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="到期时间"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.outTime">
                {{ detailList.outTime }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" class="rowclass">
          <a-col :span="4" :offset="3">
            <a-form-model-item
              class="form-item"
              labelAlign="right"
              label="所处大区"
              :colon="false"
              prop="areaId"
            >
              <span v-if="detailList.areaId">
                {{ detailList.areaName }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="车辆状态"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.status">
                {{ detailList.status }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="保险时间"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.insuranceTime">
                {{ detailList.insuranceTime }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-form-model-item
              class="form-item"
              label="年检时间"
              labelAlign="right"
              :colon="false"
            >
              <span v-if="detailList.annualTime">
                {{ detailList.annualTime }}
              </span>
              <span v-else> 暂无 </span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="bottom_btn">
        <a-button type="reset" @click="backTable">返回列表</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";

export default {
  name: "index",
  data() {
    return {
      visible: false,
      title: "",
      isshow: true,
      isAdd: false,
      isdetail: false,
      form: {
        currentPage: 1,
        pageSize: 10,
        carCode: "",
        brandModel: "",
      },
      arealist: [], //大区列表
      typeList: [], //类型列表
      CountList: [], //警告总数
      detailList: {},
      area: "",
      deptBind: {
        areaId: "", //项目部
        carCode: "", //车牌号
        carType: "", //车辆类型
        brandModel: "", //品牌型号
        enginerCode: "", //发动机号
        imei: "", //设备在汽车在线平台上的IMEI号
        status: true, //车辆状态  true为正常,false为故障
        devType: " ", //设备类型
        inTime: null, //开通时间
        outTime: null, //到期时间
        insuranceTime: null, //保险时间
        annualTime: null, //年检时间
      },
      inTime: null,
      deptList: [],
      carList: null,
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          width: "80px",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.form.currentPage - 1) * this.form.pageSize + index + 1}`,
        },
        {
          title: "车辆名称",
          dataIndex: "carCode",
          scopedSlots: {
            customRender: "carCode",
          },
          align: "center",
        },
        {
          title: "车辆类型",
          dataIndex: "typeName",
          scopedSlots: {
            customRender: "typeName",
          },
          align: "center",
        },
        {
          title: "保险状况",
          dataIndex: "isInsurance",
          scopedSlots: {
            customRender: "isInsurance",
          },
          align: "center",
        },
        {
          title: "年检状况",
          dataIndex: "isAnnual",
          scopedSlots: {
            customRender: "isAnnual",
          },
          align: "center",
        },
        {
          title: "IMEI",
          dataIndex: "imei",
          scopedSlots: {
            customRender: "imei",
          },
          align: "center",
        },
        {
          title: "所属部门",
          dataIndex: "areaName",
          scopedSlots: {
            customRender: "areaName",
          },
          align: "center",
        },

        {
          title: "操作",
          width: "15%",
          dataIndex: "operate",
          scopedSlots: {
            customRender: "operate",
          },
          align: "center",
        },
      ],
      total: 0,
    };
  },
  // watch: {
  //   "deptBind.areaId": {
  //     handler(newval, oldval) {
  //       console.log(newval, oldval);
  //     },
  //   },
  // },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    //选择大区
    //获取部门
    // createIterator(items) {
    //   items.forEach((res) => {
    //     res.scopedSlots = { title: "custom" };
    //     // if (res.menuList && res.menuList.length > 0) {
    //     //   return this.createIterator(res.menuList);
    //     // }
    //     if(res.level == 4){
    //       return this.createIterator(res.menuList);
    //     }
    //   });
    //   return items;
    // },
    recursion(data) {
      data.forEach((v) => {
        // if (v.level != 4) {
        //   v.selectable = false;
        //   this.recursion(v.menuList);
        // }
      });
      return data;
    },
    getDept() {
      this.$api.AreaFindByPage(this.$user.id).then((res) => {
        if (res.data.code == 0) {
          let data = res.data.data;
          let _list = this.recursion(data);
          this.deptList = _list;
          console.log(this.deptList);
        } else {
          this.$message.info(res.data.errorMessage);
        }
        console.log(res);
      });
    },
    // handleChange(value) {
    //   this.area = this.arealist[value].name;
    //   this.deptBind.areaId = this.arealist[value].id;
    //   console.log(this.deptBind.areaId);
    // },
    // handleSearch(value) {
    //   console.log(value);
    //   let id = 4;
    //   setTimeout(() => {
    //     this.findAreal(id, value);
    //   }, 500);
    // },
    showModal() {
      this.isshow = !this.isshow;
      this.isAdd = !this.isAdd;
      this.title = "新建申领";
    },
    backShow() {
      this.isshow = !this.isshow;
      this.isAdd = !this.isAdd;
      this.title = "";
      this.deptBind = {
        status: true,
      };
    },
    //获取车辆类型
    getCarType() {
      this.$api.getCarType().then((res) => {
        this.typeList = res.data.data;
      });
    },
    //开始时间
    startTime(date, dateString) {
      console.log(this.deptBind.inTime.valueOf());
      // this.deptBind.inTime = moment(dateString).valueOf();
      // console.log(this.deptBind.inTime);
    },
    //到期时间
    endTime(date, dateString) {
      this.deptBind.outTime = moment(dateString).valueOf();
    },
    //车辆状态
    onChangeRadios(e) {
      this.deptBind.status = e.target.value;
    },

    // //获取部门
    // getDept() {
    //   this.$api.getArea().then((res) => {
    //     this.deptList = res.data.data;
    //   });
    // },
    // areaId: "", //项目部
    //     carCode: "", //车牌号
    //     carType: "", //车辆类型
    //     brandModel: "", //品牌型号
    //     enginerCode: "", //发动机号
    //     imei: "", //设备在汽车在线平台上的IMEI号
    //     status: true, //车辆状态  true为正常,false为故障
    //     devType: " ", //设备类型
    //     inTime: null, //开通时间
    //     outTime: null, //到期时间
    //     insuranceTime: null, //保险时间
    //     annualTime: null, //年检时间
    //确认增加
    okAdd() {
      if (this.title == "新建申领") {
        if (
          this.deptBind.annualTime == null &&
          this.deptBind.insuranceTime == null &&
          this.deptBind.carCode == "" &&
          this.deptBind.imei == "" &&
          this.deptBind.areaId == ""
        ) {
          this.$message.success("请把表格填写完整");
        } else {
          // var planEndDate = new Date(this.deptBind.inTime).getTime();
          // var planStartTime = new Date(this.deptBind.outTime).getTime();
          // var LnsuranceTime = new Date(this.deptBind.insuranceTime).getTime();
          // var AnnualTime = new Date(this.deptBind.annualTime).getTime();
          // console.log(planEndDate);
          var Rectang = JSON.parse(JSON.stringify(this.deptBind)); //深拷贝
          // this.deptBind.inTime = planEndDate;
          // this.deptBind.outTime = planStartTime;
          // this.deptBind.insuranceTime = LnsuranceTime;
          // this.deptBind.annualTime = AnnualTime;
          Rectang.inTime = new Date(Rectang.inTime).getTime();
          Rectang.outTime = new Date(Rectang.outTime).getTime();
          Rectang.insuranceTime = new Date(Rectang.insuranceTime).getTime();
          Rectang.annualTime = new Date(Rectang.annualTime).getTime();
          this.$api.AddCar(Rectang).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("新增成功");
              this.isshow = true;
              this.isAdd = false;
              this.title = "";
              this.onSubmit();
            }
          });
        }
      } else {
        var Rectang = JSON.parse(JSON.stringify(this.deptBind)); //深拷贝
        Rectang.inTime = new Date(Rectang.inTime).getTime();
        Rectang.outTime = new Date(Rectang.outTime).getTime();
        Rectang.insuranceTime = new Date(Rectang.insuranceTime).getTime();
        Rectang.annualTime = new Date(Rectang.annualTime).getTime();
        this.$api.editCar(Rectang).then((res) => {
          if (res.data.code == 0) {
            this.$message.success("修改成功");
            this.deptBind = {
              status: true,
            };
            this.title = "";
            this.isAdd = false;
            this.isshow = true;
            this.onSubmit();
          }
        });
      }
    },
    //查看详情按钮
    lookDetail(item) {
      this.isdetail = true;
      this.isshow = false;
      this.isAdd = false;
      this.$api.detailCar(item.id).then((res) => {
        if (res.data.code == 0) {
          this.detailList = res.data.data;
          this.detailList.inTime = moment
            .unix(this.detailList.inTime / 1000)
            .format("YYYY-MM-DD");
          this.detailList.outTime = moment
            .unix(this.detailList.outTime / 1000)
            .format("YYYY-MM-DD");
          this.detailList.insuranceTime = moment
            .unix(this.detailList.insuranceTime / 1000)
            .format("YYYY-MM-DD");
          this.detailList.annualTime = moment
            .unix(this.detailList.annualTime / 1000)
            .format("YYYY-MM-DD");
          if (this.detailList.status == true) {
            this.detailList.status = "正常";
          } else {
            this.detailList.status = "故障";
          }
        }
      });
    },
    //详情返回列表
    backTable() {
      this.isdetail = false;
      this.isshow = true;
    },
    //编辑按钮
    editDetail(item) {
      this.isshow = false;
      this.isAdd = true;
      this.title = "编辑";
      this.$api.detailCar(item.id).then((res) => {
        if (res.data.code == 0) {
          this.deptBind = res.data.data;
          // this.deptBind.carType = res.data.data.typeName;
          // console.log(this.deptBind);
          this.deptBind.inTime = moment
            .unix(this.deptBind.inTime / 1000)
            .format("YYYY-MM-DD");
          this.deptBind.outTime = moment
            .unix(this.deptBind.outTime / 1000)
            .format("YYYY-MM-DD");
          this.deptBind.insuranceTime = moment
            .unix(this.deptBind.insuranceTime / 1000)
            .format("YYYY-MM-DD");
          this.deptBind.annualTime = moment
            .unix(this.deptBind.annualTime / 1000)
            .format("YYYY-MM-DD");
          console.log(this.deptBind);
          this.area = this.deptBind.areaName;
        }
      });
    },
    //删除按钮
    deleteDetail(item) {
      this.$api.deleteDetail(item.id).then((res) => {
        if (res.data.code == 0) {
          this.onSubmit();
          this.$message.success("删除成功");
        }
      });
    },
    //查询数据
    onSubmit() {
      this.$api.getCarPlate(this.form).then((res) => {
        if (res.data.code == 0) {
          this.carList = res.data.data;
          this.carList.forEach((item) => {
            item.insuranceTime = moment(parseInt(item.insuranceTime)).format(
              "YYYY/MM/DD"
            );
            item.annualTime = moment(parseInt(item.annualTime)).format(
              "YYYY/MM/DD"
            );
          }),
            (this.total = res.data.total);
          this.form.carCode = "";
          this.form.brandModel = "";
        }
      });
    },

    // 弹框
    hideModal() {
      this.$refs.popupchild.visibles = false;
    },
    //获取大区
    findAreal(id, key) {
      this.$api.findAreaInfoByLevel(id, key).then((res) => {
        // console.log(res);
        this.arealist = res.data.data;
        console.log(this.arealist);
      });
    },
    //获取车辆类型
    cartypeChange(value) {
      this.deptBind.carType = value;
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      // console.log(page, pageSize);
      this.form.currentPage = page;
      this.onSubmit();
    },
    //获取警告总数
    getRemindCount() {
      this.$api.getRemindCount().then((res) => {
        this.CountList = res.data.data;
      });
    },
  },

  mounted() {
    this.getCarType(); //获取车辆类型
    this.onSubmit(); //查询数据
    this.getDept(); //获取大区
    this.getRemindCount(); //获取警告总数
    // this.getDept();
    // this.findAreal(); //获取大区
  },
};
</script>
<style scoped lang="scss">
.h3 {
  font-size: 20px;
}
.title {
  font-size: 20px;
  color: #258cd7;
}
.fuze-management {
  width: 160px;
}
.bottom_btn {
  position: absolute;
  right: 15%;
}
.rowclass {
  margin: 20px 0px;
}
.back-btn {
  position: relative;
  left: 5%;
}
.solvebtn {
  margin: 0 5px;
  color: #40a9ff;
}
::v-deep .solve-img {
  height: 26px;
}
::v-deep .solve-img img {
  width: 24px;
  height: 20px;
  margin-right: 5px;
}
/* 导出按钮 */
.download-btn {
  margin-right: 40px !important;
  color: #2c6a5f;
  cursor: pointer;
  font-size: 16px;
  height: 100%;
  padding-top: 1%;
}

.solve-img {
  display: inline-block;
  justify-content: space-evenly;
}

.Greenclass {
  font-weight: bold;
  color: #359843;
}

.Redclass {
  font-weight: bold;
  color: #da6957;
}

.Yellclass {
  font-weight: bold;
  color: #bdb42d;
}

#wK_historySearch {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  position: relative;

  .exportbtn {
    background-color: transparent;
    border: 0;
    color: #207064;
  }

  .content-bottom {
    float: right;
    margin-top: 12px;
  }

  .page-box {
    float: right;
  }

  /* 图表 */
  .echarts-box {
    height: 85%;
    width: 100%;
  }

  .line-echarts {
    height: 90%;
  }

  .echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
  }
}

::v-deep#wK_historySearch .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  color: #40a9ff;
}

::v-deep#wK_historySearch .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}


.liall {
  font-size: 16px;
  color: #da6957;
  margin-top: 7px;
}
</style>
